import { Card, Col, Image, Row, Space, Statistic } from 'antd';
import { useState, useEffect } from 'react'
import jzzyPng from '../images/减灾资源.png'
import qyyshllPng from '../images/企业与社会力量减灾资源.png'
import zfzhPng from '../images/政府综合减灾资源.png'
import qtPng from '../images/其他减灾资源.png'
import CountUp from 'react-countup';
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
const formatter = (value) => <CountUp duration={3} end={value} separator="," />;
export default function JzzyTj(props) {
    const valueStyle = {
        backgroundImage: '-webkit-linear-gradient(-90deg, #fff893 35%, #ffee00 65%)',
        WebkitTextFillColor: "transparent",
        WebkitBackgroundClip: "text",
    }
     
    const [datas, setDatas] = useState([])
    useEffect(() => {
        SouyeApi.jzzy_total().then(resp => {
            setDatas(resp.data[0].count)
            
        })
    },[])
    // console.log('减灾数量：',datas?.count)

    const [data, setData] = useState([])
    useEffect(() => {
        SouyeApi.jzzy_zl().then(resp=>{
            setData(resp.data)
            setItems(() => {
                let b = 0

                const c = resp.data.map(e => {

                    const a = {}
                    if (e.jzzyzl === '政府综合减灾资源') {
                        a.jzzyzl = e.jzzyzl
                        a.count = e.count
                        a.icon = zfzhPng
                    } else if (e.jzzyzl === '企业与社会力量减灾资源') {
                        a.jzzyzl = e.jzzyzl
                        a.count = e.count
                        a.icon = qyyshllPng
                    
                    } else {

                        b = b + e.count
                        return null

                    }
                    return a

                })
                const d = {
                    jzzyzl: '其他减灾资源',
                    count: b,
                    icon: qtPng
                }
                return [...c,d].filter(item => item && Object.keys(item).length > 0)
            })
        })
    },[])

    const [items, setItems] = useState([
        {
        jzzyzl: '政府综合减灾资源',
        jc: '政府综合类',
        count: 0,
        icon: zfzhPng
    }, {
        jzzyzl: '企业与社会力量减灾资源',
        jc: '企业与社会力量类',
        count: 0,
        icon: qyyshllPng
    }, {
        jzzyzl: '其他',
        count: 0,
        icon: qtPng
    }
])

    return <>
        <Card bordered={false}>
            <div className='layout-h' style={{
                alignItems: "end"
            }}>
                <div className='layout-h center' style={{
                    marginRight: 40
                }}>
                    <div style={{
                        marginRight: 20
                    }}>
                        <img alt='' src={jzzyPng} />
                    </div>
                    <Statistic title={<div style={{
                        fontSize: 18,
                        color: '#dcdcdc',
                        fontWeight: "bold"
                    }}>减灾资源数量</div>} value={datas} valueStyle={{
                        ...valueStyle,
                        fontWeight: "bold",
                    }} formatter={formatter} />
                </div>
                <div className='layout-h fill' style={{
                    justifyContent: "end"
                }}>
                    <Space size="large">
                        {items.map(item => {
                            return <Statistic key={item.jzzyzl} title={item.jc || item.jzzyzl} prefix={<img src={item.icon} alt="" style={{
                                width: 20
                            }} />}
                                value={item.count} valueStyle={valueStyle} suffix={<span style={{
                                    fontSize: 16
                                }}>处</span>} formatter={formatter} />
                        })}
                    </Space>
                </div>
            </div>
        </Card>
    </>;
}